<template>
  <el-form
    ref="form"
    :model="form"
    :inline="isInline"
    label-position="right"
    label-suffix=" :"
    :rules="rules"
    class="my-form"
  >
    <el-form-item
      v-for="item in formOptions"
      :key="item.model"
      :label="item.label"
      :prop="item.model"
      class="form_item"
    >
      <el-input
        v-if="item.type === 'input'"
        v-model="form[item.model]"
        :placeholder="`请输入${item.label}`"
        :disabled="item.disabled"
        :style="`width:${item.width}px`"
      ></el-input>

      <el-input
        v-if="item.type === 'number'"
        v-model.number="form[item.model]"
        type="number"
        :placeholder="`请输入${item.label}`"
        :disabled="item.disabled"
        :style="`width:${item.width}px`"
      ></el-input>

      <el-select
        v-if="item.type === 'select'"
        v-model="form[item.model]"
        :placeholder="`请选择${item.label}`"
        :style="`width:${item.width}px`"
        :disabled="item.disabled"
        clearable
      >
        <el-option
          v-for="opt in item.options"
          :key="opt.label"
          :label="opt.label"
          :value="opt.model"
        ></el-option>
      </el-select>

      <el-date-picker
        v-if="item.type === 'date'"
        type="date"
        placeholder="选择日期"
        :value-format="item.format || 'yyyy-MM-dd'"
        v-model="form[item.model]"
        :disabled="item.disabled"
        :style="`width:${item.width}px`"
      ></el-date-picker>

      <el-switch
        v-if="item.type === 'switch'"
        v-model="form[item.model]"
        :disabled="item.disabled"
      ></el-switch>

      <el-checkbox-group
        v-if="item.type === 'checkbox'"
        v-model="form[item.model]"
      >
        <el-checkbox
          v-for="opt in item.options"
          :key="opt.label"
          :label="opt.model"
          :disabled="opt.disabled"
          ></el-checkbox
        >
      </el-checkbox-group>

      <el-radio-group
        v-if="item.type === 'radio'"
        v-model="form[item.model]"
        
        :style="`width:${item.width}px`"
      >
        <el-radio
          v-for="opt in item.options"
          :key="opt.model"
          :label="opt.label"
          :disabled="opt.disabled"
          >{{ opt.label }}</el-radio
        >
      </el-radio-group>

      <el-input
        v-if="item.type === 'textarea'"
        type="textarea"
        v-model="form[item.model]"
        :placeholder="`请输入${item.label}`"
        :disabled="item.disabled"
        :style="`width:${item.width}px`"
      ></el-input>

      <slot
        v-if="item.type === 'slot'"
        :label="item.slotName"
        :name="item.slotName"
        :data="form"
        v-model="form[item.model]"
      ></slot>
    </el-form-item>
    <template v-if="isSearch">
      <el-form-item>
        <el-button type="primary" @click="submit('form')" size="mini"
          >查询</el-button
        >
        <slot name="bottom_button" :data="form"></slot>
      </el-form-item>
    </template>

    <template v-else>
      <br />
      <el-form-item style="
    display: flex;
    justify-content: center;
">
        <el-button type="primary" @click="submit('form')" size="mini"
          >提交</el-button
        >
        <slot name="bottom_button" :data="form"></slot>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "myForm",
  data() {
    return {};
  },
  props: {
    formOptions: {
      type: Array,
      required: true,
    },
    isInline: {
      type: Boolean,
      default: true,
    },
    form: {
      type: Object,
      default() {
        return {};
      },
    },
    rules: {
      type: Object,
    },
    isSearch: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    submit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$emit("sureSubmit", this.form);
          // this.$refs.form.resetFields();
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
</style>